<style>
    body {
        background-color: #222;
    }
    
    .container {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #222;
        color: #fff;
    }
    
    .app {
        position: absolute;
        z-index: 1;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 375px;
        /* height: 100%; */
        /* transform: rotateZ(0deg); */
        display: block;
        pointer-events: auto;
        background-color: #5db0ff;
    }
    
    .h5-img img {
        width: 100%;
    }
    
    .h5-img .box {
        margin: 20px 20px 0;
    }
    /* 屏幕宽度小于600px时 */
    
    @media (max-width: 600px) {
        .app {
            width: 100%;
        }
    }
</style>

<div class="container">
    <div class="app">
        <div class="weui-form">
            <div class="weui-form__bd">
              <div class="weui-form__text-area">
                <h2 class="weui-form__title">验证码</h2>
                <div class="weui-form__desc">验证手机号样式</div>
              </div>
              <div class="weui-form__control-area">
                <div class="weui-cells__group weui-cells__group_form">
                  <div class="weui-cells">
                      <div class="weui-cell weui-cell_active" wah-hotarea="click">
                          <div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
                          <div class="weui-cell__bd">
                              <input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907">
                          </div>
                          <div class="weui-cell__ft">
                            <button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon" wah-hotarea="click">
                              <i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
                            </button>
                          </div>
                      </div>
                      <div id="js_cell_vcode" class="weui-cell weui-cell_active weui-cell_vcode weui-cell_wrap" wah-hotarea="click">
                          <div class="weui-cell__hd"><label for="js_input2" class="weui-label">验证码</label></div>
                          <div class="weui-cell__bd weui-flex">
                            <input id="js_input2" class="weui-input weui-cell__control weui-cell__control_flex" type="text" pattern="[0-9]*" placeholder="输入验证码" maxlength="6">
                            <button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" wah-hotarea="click">
                              <i class="weui-icon-clear"></i>
                            </button>
                            <button id="js_btn_vcode" role="button" class="js_target weui-cell__control weui-btn weui-btn_default weui-vcode-btn">获取验证码</button>
                          </div>
                      </div>
                  </div>
                  <div class="weui-cells__tips"><a class="weui-link weui-wa-hotarea" href="javascript:">收不到验证码</a></div>
                </div>
              </div>
            </div>
            <div style="display: none;" class="weui-form__ft">
              <div class="weui-form__tips-area">
                <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
                  <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
                  </span>
                </label>
              </div>
              <div class="weui-form__opr-area">
                <button class="weui-btn weui-btn_primary" type="button" id="showTooltips" wah-hotarea="click">确定</button>
              </div>
            </div>
            <div class="weui-form__ft">
              <div class="weui-form__tips-area">
                <div class="weui-form__tips__group weui-form__tips__group_primary">
                  <div class="weui-form__tips__wrp">
                    <label id="weuiAgree1" for="weuiAgreeCheckbox1" class="weui-agree weui-wa-hotarea">
                      <input id="weuiAgreeCheckbox1" type="checkbox" class="weui-agree__checkbox"><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
                      </span>
                    </label>
                  </div>
                  <div class="weui-form__tips__wrp">
                    <label id="weuiAgree0" for="weuiAgreeCheckbox0" class="weui-agree weui-wa-hotarea">
                      <input id="weuiAgreeCheckbox0" type="checkbox" class="weui-agree__checkbox"><span class="weui-agree__text">以上信息用于核对账号绑定的身份</span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="weui-form__opr-area">
                <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
              </div>
            </div>
          </div>
    </div>
</div>
<script>
</script>